<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../public/css/basic.css"/>
    <link rel="stylesheet" href="../public/layui/css/layui.css"/>
    <link rel="stylesheet" href="../public/layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" href="../public/css/manage.css"/>
    <script src="../public/js/jquery-1.11.1.min.js"></script>
    <title>新增企业</title>
    <style>
        body{min-width: 500px}
        #container{width: 100%;height: 500px}
    </style>
</head>
<body onload="init()">

<form action="" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">企业名称</label>
        <div class="layui-input-block">
            <input type="text" placeholder="请输入企业名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">企业所在地</label>
        <div class="layui-input-inline">
            <select id="province"  name="org_province" lay-filter="org_province"></select>
        </div>
        <div class="layui-input-inline">
            <select id="city" name="org_city" lay-filter="org_city"></select>
        </div>
        <div class="layui-input-inline">
            <select id="area" name="org_area" lay-filter="org_area"></select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">企业位置</label>
        <div class="layui-input-block">
            <div id="container"></div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">联系人</label>
        <div class="layui-input-block">
            <input type="text" placeholder="请输入联系人姓名" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系电话</label>
        <div class="layui-input-block">
            <input type="text" placeholder="请输入联系电话" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">企业简介</label>
        <div class="layui-input-block">
            <textarea style="resize: none" placeholder="请输入企业简介" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">企业状态</label>
        <div class="layui-input-block">
            <input type="radio" name="zt" value="正常" title="正常" checked="">
            <input type="radio" name="zt" value="禁用" title="禁用">
        </div>
    </div>
    <div class="but1-mid">
        <button class="layui-btn bc">保存</button>
    </div>
</form>
</div>
<script src="../public/layui/layui.js"></script>
<script type="text/javascript" src="../public/js/area.js"></script>
<script>

    layui.use(['form'], function() {
        var form = layui.form;

    })
//城市三级联动
    var mypcas = new PCAS("org_province", "org_city", "org_area", "请选择省份", "请选择城市", "请选择地区");
    var city=""
    layui.use(['form'], function() {
        var form = layui.form;
        var province;
        form.on('select(org_province)', function(data) {
            province = data.value;
            //layui高版本不清除会出现选项重复
            document.getElementById("province").innerHTML="";
            document.getElementById("city").innerHTML="";
            document.getElementById("area").innerHTML="";
            var mypcas = new PCAS("org_province", "org_city", "org_area", province, "请选择城市", "请选择地区");
            form.render('select');
            codeAddress(province+$("#city").next().children("div").children("input").val()+$("#area").next().children("div").children("input").val());

        });
        form.on('select(org_city)', function(data) {
            //layui高版本不清除会出现选项重复
            document.getElementById("province").innerHTML="";
            document.getElementById("city").innerHTML="";
            document.getElementById("area").innerHTML="";
            var mypcas = new PCAS("org_province", "org_city", "org_area", province, data.value, "请选择地区");
            codeAddress(province+data.value);
            city=data.value;
            form.render('select');
        });
        form.on('select(org_area)', function(data) {
            codeAddress(province+city+data.value);
            form.render('select');
        });
    });
</script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script>
    var geocoder,map,marker = null;
    var init = function() {
        var center = new qq.maps.LatLng(39.916527,116.397128);
        map = new qq.maps.Map(document.getElementById('container'),{
            center: center,
            zoom: 15
        });
        //绑定单击事件添加参数
        qq.maps.event.addDomListener(map, 'click', function(event) {
            addMarker(event.latLng);
        });
        qq.maps.event.addListener(map, 'click', function(event) {

            console.log('您点击的位置为: [' + event.latLng.getLat() + ', ' +
                    event.latLng.getLng() + ']');

        });
        //调用地址解析类
        geocoder = new qq.maps.Geocoder({
            complete : function(result){
                deleteOverlays();
                map.setCenter(result.detail.location);
//                var marker = new qq.maps.Marker({
//                    map:map,
//                    position: result.detail.location
//                });
//                markersArray.push(marker);
            }
        });
    }

    function codeAddress(str) {
        geocoder.getLocation(str);
    }

//    地图
    var markersArray = [];

    function deleteOverlays() {
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
            markersArray.length = 0;
        }
    }
    //添加标记
    function addMarker(location) {
        deleteOverlays();
        var marker = new qq.maps.Marker({
            position: location,
            map: map
        });
        markersArray.push(marker);
    }
</script>
</body>
</html>